<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>margin塌陷</title>
    <style>
      .outer {
        width: 400px;
        /* 效果4需要注释掉看效果 */
        /* height: 400px; */
        background-color: rgb(46, 105, 164);
        /* border: 1px solid red; */
        padding: 10px;
      }
      .inner1 {
        width: 100px;
        height: 100px;
        background-color: rgb(99, 164, 46);
        /* 1.单独给第⼀个⼉⼦加⼀个下外边距，看效果 */
        margin-bottom: 150px;
        /* 1效果：inner2向下移动50px */
        /* 3.给第⼀个⼉⼦加⼀个上外边距 ,看效果~！*/
        margin-top: 50px;
        /* 3效果：给第⼀个⼉⼦设置的margin-top,但是⽗元素的outer向下移动，这就是margin塌陷问题*/
      }
      .inner2 {
        width: 100px;
        height: 100px;
        background-color: rgb(164, 127, 46);
        /* 2.单独给第⼆个⼉⼦加⼀个上外边距，看效果 */
        margin-top: 10px;
        /* 2效果：inner2 向下移动50px */
        /* 4.给inner2⼀个下外边距，并删除⽗亲的outer的⾼度，让⽗亲的内容撑开⾃⼰的⾼度，观察效果 */
        margin-bottom: 200px;
        /* float: left; */
        /* 4效果：inner2的margin-bottom⻓度,调试器盒⼦模型没问题，
 但是实际效果并没有撑开⽗亲outer的⾼度，反⽽被⽗亲抢⾛了。
 可以在⽗元素outer下在加⼀个div辅助测试.
 这也是margin塌陷问题
 */
        /* 5总结：在⼀个⽗元素⾥边，
 对⽗元素的第⼀个元素设置上外边距值
 或者对最后⼀个元素设置下外边距值，
 这两个值的效果都会被⽗元素抢⾛ */
        /* 6.解决⽅案：
 1.给⽗元素加上边框属性 border:1px solid red; 设置0不⾏；
 2.给⽗元素⼀个padding，设置0不⾏。
 3.设置 overflow:hidden; 在不影响⽗容器⼤⼩的情况下解决塌陷问题。
 overflow属性是溢出之后的显示模式。解决塌陷的偏⽅。。
 
 */
      }

      .div1,
      .div2 {
        display: inline-block;
        width: 100px;
        height: 100px;
        border: 1px solid black;
      }
      .div1 {
        margin-right: 20px;
      }
      .div2 {
        margin-left: 20px;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="inner1">inner1</div>
      <div class="inner2">inner2</div>
    </div>
    <div style="background-color: red; margin: 20px 0">我是4效果的测试div</div>

    <div class="div1">111</div>
    <div class="div2">111</div>
  </body>
</html>
